﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="../../favicon.ico" />
    <!--jquery库-->
    <script src="../../js/jquery.min.js"></script>
    <!--bootstrap库-->
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../../js/bootstrap/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
      <script src="../../js/bootstrap/html5shiv.min.js"></script>
      <script src="../../js/bootstrap/respond.min.js"></script>
    <![endif]-->
    <!--font-awesome字体库-->
    <link href="../../css/font-awesome.min.css" rel="stylesheet" />
    <!--流式布局库-->
    <script src="../../js/jquery.masonry/masonry.pkgd.min.js"></script>
    <style>
        .template { background-color: gray; border: 1px solid #b6ff00; }
        .div-200 { height: 200px; }
        .div-400 { height: 400px; }
    </style>
    <script>
        $(function () {
            // init Masonry
            var $grid = $('.content').masonry({
                columnWidth: '.template',
                itemSelector: '.template'
            });
            $grid.masonry();
        })
    </script>
</head>
<body>
    <div class="container">
        <div class="row content">
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
                1
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
                2
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
                3
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
                4
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
                5
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
                6
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
                7
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
                8
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
                9
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
                10
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
                11
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
                12
            </div>
        </div>
    </div>
</body>
</html>
